<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta "name"="viewport" content="width=device-width, initial-scale=1.0">
	
    <title>My JSP 'sys_organize_list.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<link rel="shortcut icon" href="${ctx }/ico/favicon.ico"> 
	<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="${ctx }/css/animate.css" rel="stylesheet">
    <link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="${ctx }/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	<!-- zTree -->
	<link href="${ctx }/css/plugins/demo/demo.css" rel="stylesheet">
	<link href="${ctx }/css/plugins/zTreeStyle/metro.css" rel="stylesheet">
	<link href="${ctx }/css/font-awesome.css" rel="stylesheet">
	<style type="text/css">
	ul.ztree {margin-top: 20%;margin-left:5%;border: 1px solid #617775;width:320px;height:calc(100% - 150px);overflow-x:auto;}
	</style>
  </head>
  
  <body>
  <!-- <input type="button" value="点击" onclick="beforeName('3543')" > -->
  	<div style="overflow:hidden;">
		<div class="zTreeDemoBackground left" style="float:left">
			<div class="input-group" style="float: left;width:90%;margin-top: 5%;">
				<input type="text" placeholder="请输入部门名称" class="input-sm form-control" style="float: left;height:100%;width:90%;margin-left:7%;" id="search_Org">
				<span class="input-group-btn"><button type="button" class="btn btn-sm btn-sm btn-primary" id="searchOrg" onClick="searchVideo();">搜索</button></span>
			</div>
			<div class="input-group" style="float: left;width:90%;">
				<span class="input-group-btn">
				<!--  <button type="button" class="btn btn-sm btn-sm btn-primary" id="onQueryOrg"  style="float: left;margin-left:7%;">全量部门同步</button> -->
				 <!-- <button type="button" class="btn btn-sm btn-sm btn-primary" id="searchOrg">部门数据导入</button> -->
				</span>
			</div>
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<!-- start 加载成员列表  -->
		<div class="animated fadeInRight" style="float: left;padding-left:130px;
    	width: 80%;hidden:ture;overflow-x:hidden" id="userInfoWin" tabindex="-1" role="dialog" aria-hidden="true">
    	 <iframe id="userInfoFrame" width="100%" height="100%" frameborder="0" style="overflow:hidden">
          </iframe>
		</div>
		<!-- end 加载成员列表 结束-->
	</div>	
	<!-- 添加部门模块窗口 -->
	<div class="modal inmodal" id="addSysOrgUserWin" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h5 class="modal-title">添加部门</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="addSysOrgUserFrom">
						<input type="hidden" name="grandpaId" id="grandpaId" value="">
						<input type="hidden" name="parent_org_id" id="parent_org_id" value="">
						<div class="form-group">
                        	<label class="col-sm-3 control-label">父级部门名称：</label>
                            <div class="col-sm-8">
                            	<input id="parent_name" name="parent_name" class="form-control" required="" 
                            	aria-required="true" type="text" value="" readOnly="true">                                    
                            </div>
                        </div>
                        <div class="form-group">
                        	<label id="org_id" class="col-sm-3 control-label">部门编号：</label>
                            <div class="col-sm-8">
                            	<input id="org_id" name="org_id" class="form-control" required="" 
                            	aria-required="true" type="text" value="" placeholder="请输入部门ID">                                    
                            </div>
                        </div>
                        <div class="form-group">
                        	<label id="point_name" class="col-sm-3 control-label">部门名称：</label>
                            <div class="col-sm-8">
                            	<input id="org_name" name="org_name" class="form-control" required="" 
                            	aria-required="true" type="text" value="" placeholder="请输入部门名称">                                    
                            </div>
                        </div>
                        
                        <div class="form-group">
                        	<label class="col-sm-3 control-label">部门级别：</label>
                            <div class="col-sm-8">
                            	<input id="org_order" name="org_order" class="form-control" required="" 
                            	aria-required="true" type="number"  placeholder="请输入部门级别">                                    
                            </div>
                        </div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">                                   
                                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                					<button type="submit" class="btn btn-primary">保存</button>
                            </div>
                   		</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!--end 添加部门模块窗口 -->
	<!-- 导出表格窗口 -->
	<div class="modal inmodal" id="exportOrgWin" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					 </button>
					<h5 class="modal-title">导出表格</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="outExecls" method="get" action = "${ctx }/organize/exportOrg">
						<input type="hidden" name="parent_org_id" id="parent_org_id" value="">
						<div class="form-group">
							<label class="col-sm-3 control-label">导出部门：</label>
							<div class="col-sm-8">
								<input id="out_org_name" name="out_org_name" class="form-control" required="" 
								aria-required="true" type="text" value="" readOnly="true">                                    
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">
								<button id="submitApply" class="btn btn-primary">保存</button>
								<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!--end 导出表格窗口 -->
	<!-- 导入表格窗口 -->
	<div class="modal inmodal" id="insertOrgWin" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
					<h5 class="modal-title">导入人员信息表</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="addExecls" name="addExecls" method = "post"
					 enctype="multipart/form-data">
					
						<input type="hidden" name="insert_org_id" id="insert_org_id" value="">
						<input type="hidden" name="insert_org_name" id="insert_org_name" value="">
						
						<div class="form-group">
							<label class="col-sm-3 control-label">选择导入表：</label>
							<div class="col-sm-8">
								<input id="file" name="file" required="" aria-required="true"  type="file">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">   
								<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
								<button  id="addExcel" class="btn btn-primary">上传</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!--end 导入表格窗口 -->
	<!-- 编辑模块窗口Start -->
	<div class="modal inmodal" id="editOrgWin" role="dialog" aria-hidden="true" style="padding-bottom:30px">
		<iframe id="editOrgFrame" width="100%" height="100%" frameborder="0"></iframe>
	</div>
		
	<!-- 全局js -->
	 <script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	    <script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>
	    <!-- Peity -->
	    <script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>
	    <!-- jqGrid -->
	    <script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	    <script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
	    <!-- jQuery Validation plugin javascript-->
	    <script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
	    <script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>
		<!-- layer javascript -->
		<script src="${ctx }/js/plugins/layer/layer.min.js"></script>
		<!-- jQuery form-->
		<script src="${ctx }/js/jquery.form.js"></script>
	    <!-- 自定义js -->
	    <script src="${ctx }/js/content.js?v=1.0.0"></script>
	    <!-- Sweet alert -->
    	<script src="${ctx }/js/plugins/sweetalert/sweetalert.min.js"></script>
	    <script src="${ctx }/js/plugins/bootstrap-table/bootstrapValidator.js"></script>
	<!-- ztree plugin javascript -->
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.core.min.js"></script>
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.exhide.min.js"></script>
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.exedit.min.js"></script>
	<script src="${ctx }/js/plugins/zTree/jquery.ztree.excheck.min.js"></script>
	<script type="text/javascript">
		var setting = {
			data : {
				simpleData : {
					enable : true,
					idKey: "id",
					pIdKey: "pId"
				}
			},
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			callback : {
				onClick: zTreeOnClick,//点击事件
				//onRightClick: zTreeOnRightClick,//点击右键
				//onClick:   show,
				beforeRemove:beforeRemove,//点击删除时触发，用来提示用户是否确定删除
			    //onRemove:onRemove,//删除节点后触发，用户后台操作
			    beforeEditName: beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑
		        //beforeRename:beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求
		        //onRename:onRename,//编辑后触发，用于操作后台
		        
			},
			edit: {
				enable: true,
				drag: {//禁止拖拽
					isCopy: false,
					isMove: false
				},
				//showRemoveBtn: showRemovBtn,
				showRemoveBtn: true,
				showRenameBtn: true
				},
			async : {
				enable : true,
				url :"${ctx}/organize/execute",
				autoParam : [ "id", "name" ]
			}
		};
		var treeObj;
		
		$(document).ready(function() {
			$.fn.zTree.init($("#treeDemo"), setting);
			setEdit();
			treeObj=$.fn.zTree.getZTreeObj("treeDemo");
			
			$.jgrid.defaults.styleUI = 'Bootstrap';
			// Examle data for jqGrid
			var searchString='';
			var detail= "123";//做限制
			
			
		});
	
		function setEdit() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			removeTitle = "删除",
			renameTitle = "修改";
			setting.edit.showRemoveBtn =true;
			setting.edit.showRenameBtn = true;
			zTree.setting.edit.removeTitle = "删除";
			zTree.setting.edit.renameTitle = "修改";
			}
		function showRemovBtn(treeId, treeNode){
		 if(treeNode.show_switch==true){
		    return true;
		 }else{
		    return false;
		  }
		}
		function showRenameBtn(treeId, treeNode){
		 if(treeNode.show_switch==true){
		    return true;
		 }else{
		    return false;
		  }
		}
		//单击节点时查看该节点下的人员信息
		function zTreeOnClick(e, treeId, treeNode) {
			var org_id = treeNode.id;
			var org_name = treeNode.name;
	        var frameSrc = "${ctx }/organize/sys_user_info_list?org_id="+org_id+"&org_name="+org_name;
			$('#userInfoFrame').attr("src", frameSrc);
			$('#userInfoWin').show();
			$("#parentOrgId").val(treeNode.id);
			$("#parentOrgName").val(treeNode.name);
	        /*
	        	将节点值org_id和部门名字带到addSysUserInfoFrom的input中区通过$("#parent_name").val(treeNode.name);赋值
	        	提交表单之后，进入Controller层的organize/add_sys_user，org_id和emp_id获取到了
	        */
		};
		
		//添加部门
		var v_treeNode;
		function addHoverDom(treeId, treeNode) {
			v_treeNode=treeNode;
			var sObj = $("#" + treeNode.tId + "_span");
			
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			if (treeNode.editNameFlag || $("#diyDownloadBtn_"+treeNode.id).length>0) return;
			if (treeNode.editNameFlag || $("#diyUploadBtn_"+treeNode.tId).length>0) return;
			var addStr =
			"<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加部门' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			/* var addStr ="<i class='fa fa-cloud-download' id='diyDownloadBtn_" +treeNode.id+ "' title='导出数据' onfocus='this.blur();'></i>" + 
			"<i class='fa fa-cloud-upload' id='diyUploadBtn_" +treeNode.id+ "' title='导入数据' onfocus='this.blur();'></i>" +
			"<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加部门' onfocus='this.blur();'></span>";
			sObj.after(addStr); */
			
			/* $("#diyDownloadBtn_"+treeNode.id).click(function(){
				$("#parent_org_id").val(treeNode.id);
				$("#out_org_name").val(treeNode.name);
		        $('#exportOrgWin').modal('show');
			});
			
			$("#diyUploadBtn_"+treeNode.id).click(function(){
				$("#insert_org_id").val(treeNode.id);
				$("#insert_org_name").val(treeNode.name);
				$('#insertOrgWin').modal('show');
			}); */
			
			$("#addBtn_"+treeNode.tId).click(function(){
				$("#addSysOrg").attr("disabled", false);
				$("#parent_org_id").val(treeNode.id);
				$("#parent_name").val(treeNode.name);
				$('#addSysOrgUserWin').modal('show');
			});
		};
    	
		$("#addSysOrgUserFrom").submit(function(){
			$("#addSysOrg").attr("disabled", true);
			$.ajax({
				async : false, //同步
		    	type: "post",
		    	url: "${ctx }/organize/insertSysOrgInfo",
		    	dataType:"json",
		     	data: $('#addSysOrgUserFrom').serialize(),
		     	success: function(data) {
		     		var val=$("input:radio[name='level']:checked").val();
		     		var result="部门";
	      			if(val=='0'){
	      				result="网点";
	      			}
		      		if(data.reserved1!='0')
		      		{
		      			layer.alert('添加'+result+'失败！',{icon: 2}, function(index){
		      			   $("#addSysOrgUserFrom :input").not(":button, :submit, :hidden").val("").remove("selected");
							$('#addSysOrgUserWin').modal('hide');//关闭add窗口
							//关闭提示框
							layer.close(index);
		      			});
		      		}else
		      		{
		      			
		      			layer.alert('添加'+result+'成功！',{icon: 1}, function(index){
		      				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		      				//refreshParentNode();
		      				zTree.addNodes(v_treeNode,{id:data.org_id, pId:data.parent_org_id, name:data.org_name});
							$("#addSysOrgUserFrom :input").not(":button, :submit, :hidden").val("").remove("selected");
							$('#addSysOrgUserWin').modal('hide');//关闭add窗口
							//关闭提示框
							layer.close(index);
						});
		      		}
		      	},
		      	error: function() {		      		
		      		layer.alert('添加部门失败！',{icon: 2});
        		}
        	});
       		return false;
		});
		
		//编辑机构数据
	var editData;
	 function beforeEditName(treeId, treeNode) {
		//alert(treeNode.id);
		editData=treeNode;
		var fromUrl = "${ctx }/organize/editOrgMap?org_id="+treeNode.id;
		$("#editOrgFrame").attr("src", fromUrl);
		$('#editOrgWin').modal('show');
		return false;
	} 
	
	/* function beforeName(id) {
		//alert(treeNode.id);
		//editData=treeNode;
		var fromUrl = "${ctx }/organize/editOrgMap?org_id="+id;
		$("#editOrgFrame").attr("src", fromUrl);
		$('#editOrgWin').modal('show');
		return false;
	}
	 */
	function editOrgWinClose(data){
		if(data=='0'){
			treeObj.reAsyncChildNodes(null, "refresh");//重新加载treeObj
			
			//window.location.reload();
		}
			/* var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		      				//refreshParentNode();
			zTree.addNodes(v_treeNode,{id:data.org_id, pId:data.parent_org_id, name:data.org_name}); */
		
		//关闭edit窗口
		$("#editOrgFrame").attr("src", "");
		document.getElementById("editOrgFrame").innerText = "";
		$('#editOrgWin').modal('hide');
   }
	
			   /** 
     * 刷新当前选择节点的父节点 
     */  
    function refreshParentNode() {  
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),  
        type = "refresh",  
        silent = false,  
        nodes = zTree.getSelectedNodes();  
        /*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/  
        var parentNode = zTree.getNodeByTId(nodes[0].parent_org_id);  
        /*选中指定节点*/  
        zTree.selectNode(parentNode);  
        zTree.reAsyncChildNodes(parentNode, type, silent);  
    } 
		$("#submitApply").click(function(){
			$("#addExecls").submit();
			//关闭add窗口
			$('#exportOrgWin').modal('hide');
		});
		
		$("#addExcel").click(function(){
			//var org_id = $('#insert_org_id').val();
			var file = $('#file').val();
		 	alert("file,"+file);
		 	$.ajax({
				url :"${ctx }/organize/inputOrg",
		 		type : "post",
				data:$('#addExecls').serialize(),
				async:false,
				success:function(){
				      layer.msg('导入成功!', {
						icon : '1',
						title : '温馨提示'
					});
					/* if(data==1){
						alert("导入成功");
					}else{
						alert("导入失败");	
					} */
				},
				error:function(){
					layer.msg('导入失败，请重新导入!', {
						icon : '2',
						title : '温馨提示'
					});
				}
		 	});
		 });
		
		
		//鼠标移开后隐藏添加修改删除
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
			$("#diyDownloadBtn_"+treeNode.id).unbind().remove();
			$("#diyUploadBtn_"+treeNode.id).unbind().remove();
		};
		
		//点击删除时触发，用来提示用户是否确定删除
		function beforeRemove(treeId,treeNode){
		   	layer.confirm('您确定要删除该节点吗,操作后数据不可恢复?',{icon : 3,title : '提示'},function() {
				 var id =treeNode.id;
			    $.ajax({
    			async: false,
    			type: "post",
    			url: "${ctx }/organize/deleteSysOrgInfo", 
    			data: "id="+id,
    			success: function(data) {
    			    if(data=='0'){
						layer.alert('删除成功!',{icon: 1});
						treeObj.removeNode(treeNode);
					}else if(data=='2'){
						layer.alert('本机构下面有人员存在，请先删除成员 !',{icon: 0});
					}else{
						layer.alert('删除失败!',{icon: 2});
					}
    			        
		    	},
		      	error: function() {
        		}
			});	
			},function() {
				console.log(false);
				layer.close(layer.index); //再执行关闭  
			});
			return false;
		}
		
		
		
	//查询
	function searchVideo() {
		var names=$("#search_Org").val();
		alert("names:"+names);
		if(names!=null&&names!=""){
			$.ajax({
				async : false, //同步
		    	type: "post",
		    	url: "${ctx}/organize/getDepartment",
		    	dataType:"json",
		     	data: {"name":names},
		     	success: function(data) {
		     		if(data[0]!=null){
						$.fn.zTree.init($("#treeDemo"), setting,data);//赋值
						var zTree= $.fn.zTree.getZTreeObj("treeDemo");//取值
                        zTree.reAsyncChildNodes(data, "refresh");//刷新树
		     		}else{
		     			layer.msg('查询失败，没有该部门!', {
							icon : '2',
							title : '温馨提示'
						});
		     		}
		     	},
		      	error: function() {	
		      		layer.msg('查询失败!', {
						icon : '2',
						title : '温馨提示'
					});
	       		}
	       	});
		}else{
			treeObj.reAsyncChildNodes(null, "refresh");//重新加载treeObj
		}
    };
		
		//修改节点
		function onRename(e,treeId,treeNode,isCancel){
		 var id=treeNode.id;
		 var name =treeNode.name;
		 $.ajax({
				type : "post",
				url :"${ctx }/organize/updateSysOrg",
				data:{"id":id,
					 "name":name
				},
				success:function(data){
					if(data=='0'){
						layer.alert('修改成功,您已修改该信息!',{icon: 0});
					}else{
						layer.alert('修改失败,您未修改该信息!',{icon: 0});
					}
				},
				error:function(){
					layer.alert('修改失败,您未修改该信息!',{icon: 0});
				}
		 });
		}
		
		//from表单单选控件
		function beforeSelectRow()  
        {  
            $("#jqgridId").jqGrid('resetSelection');  
            return(true);  
        }
    	//绑定查询事件
       	function searchBtn(){
        	var searchString = $("#search").val(); 
	        $("#table_list").jqGrid('setGridParam',{ 
	            url:"${ctx }/organize/loadDataGrid", 
	            postData:{'emp_name':searchString}, //发送数据 
	            page:1
	        }).trigger("reloadGrid"); //重新载入 
    	};

      
	</script>
  </body>
</html>
